<template>
  <div class="content_box">
    <VHeader :list-data="interimListData" :option-config="option" @change="search">
      <el-button circle icon="el-icon-delete" @click="deleteData('/deleteAdmins.do', deleteArr)" />
      <el-button circle icon="el-icon-plus" @click="addViews = true" />
      <el-button circle icon="el-icon-refresh-right" @click="getListData" />
    </VHeader>
    <VTable
      :list-data="listData[pageConfig.Page - 1]"
      :loading="loading"
      :table-config="tableConfig"
      @select-change="selectChange"
    >
      <template v-slot:A="scope">
        <el-select v-model="scope.data.row.roles_name" collapse-tags disabled multiple placeholder="请选择">
          <el-option v-for="(item, index) in roleLists" :key="index" :label="item" :value="index + 1" disabled />
        </el-select>
      </template>
      <template v-slot:operate="scope">
        <el-button-group>
          <el-button icon="el-icon-edit" type="primary" @click="showUpData(scope.data.row)" />
          <el-button
            icon="el-icon-delete"
            type="primary"
            @click="deleteData('/deleteAdmins.do', [{ key: scope.data.row.key }])"
          />
        </el-button-group>
      </template>
    </VTable>
    <!-- 创建用户弹窗 -->
    <el-dialog :visible.sync="addViews" destroy-on-close title="创建用户" width="30%">
      <el-form :model="add_data" :rules="add_rules" label-position="left" label-width="80px" @submit.native.prevent>
        <el-form-item label="用户名" prop="username" size="medium">
          <el-input v-model="add_data.username" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password" size="medium">
          <el-input v-model="add_data.password" clearable />
        </el-form-item>
        <el-form-item label="权限" prop="roles" size="medium">
          <el-select v-model="add_data.roles" collapse-tags multiple placeholder="请选择">
            <el-option v-for="(item, index) in roleLists" :key="index" :label="item" :value="index + 1" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否可用" prop="status" size="medium">
          <el-switch v-model="add_data.status" />
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="!add_data.username || !add_data.password || !add_data.roles.length > 0"
            type="primary"
            @click="addData(add_data)"
          >创建用户
          </el-button>
          <el-button @click="addRe">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改用户弹窗 -->
    <el-dialog :visible.sync="editViews" destroy-on-close title="修改用户" width="30%">
      <el-form :model="editData" :rules="add_rules" label-position="left" label-width="80px" @submit.native.prevent>
        <el-form-item label="用户名" prop="username" size="medium">
          <el-input v-model="editData.username" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password" size="medium">
          <el-input v-model="editData.password" clearable />
        </el-form-item>
        <el-form-item label="权限" prop="roles_name" size="medium">
          <el-select v-model="editData.roles_name" collapse-tags multiple placeholder="请选择">
            <el-option v-for="(item, index) in roleLists" :key="index" :label="item" :value="index + 1" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否可用" prop="status" size="medium">
          <el-switch v-model="editData.status" />
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="!editData.username || !editData.password || !editData.roles_name.length > 0"
            type="primary"
            @click="upData(editData)"
          >创建
          </el-button>
          <el-button @click="addRe">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 换页 -->
    <el-pagination
      :current-page.sync="pageConfig.Page"
      :size-change="pageConfig.size"
      :total="pageConfig.total"
      background
      class="Pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChange"
      @current-change="setPage"
    />
  </div>
</template>

<script>
// 引入API
import { addAdminApi, getAuthorityList, updateAdminsApi } from '@/api/user'
// 引入公共函数
import { deleteData, pageSizeChange, tableDataProcess } from '@/utils/diy_funtion'

export default {
  name: 'Authority',
  data() {
    return {
      // 数据列表
      listData: [],
      // 数据列表拷贝(未分页)
      interimListData: [],
      roleLists: ['超级管理员', '学生管理员', '考试管理员'],
      loading: true,
      tableConfig: {
        table_show: {
          key: 'ID',
          add_time: '创建时间',
          username: '用户名',
          password: '密码'
        },
        sortable: { key: true },
        status: true,
        slots: [
          {
            slot_name: 'A',
            object_name: 'roles_name',
            label: '权限',
            align: 'center'
          }
        ],
        selection: true,
        align: 'center',
        operate: true
      },
      option: {
        option_name: ['ID', '用户名'],
        object_name: ['key', 'username']
      },
      // 添加&编辑弹窗状态
      editViews: false,
      editData: {},
      addViews: false,
      add_data: { username: '', password: '', status: false, roles: [] },
      // 数据规则
      add_rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        roles: [{ required: true, message: '请选择权限', trigger: 'blur' }]
      },
      // 批量删除数组
      deleteArr: [],
      pageConfig: {
        // 总条数
        total: 1,
        // 当前页
        Page: 1,
        // 每页条数选项
        size: [10, 20, 50, 100],
        // 默认条数
        pagesSize: 10
      }
    }
  },
  created() {
    // 获取数据
    this.getListData()
  },
  methods: {
    // 换页
    pageSizeChange: pageSizeChange,
    // 删除表数据
    deleteData: deleteData,
    // 获取表数据
    getListData() {
      this.loading = true
      const newData = []
      getAuthorityList().then(response => {
        // 数据处理获取权限信息
        for (let i = 0; i < response.data.data.length; i++) {
          if (response.data.data[i].role.length > 1) {
            const roles = []
            for (let o = 0; o < response.data.data[i].role.length; o++) {
              roles.push(response.data.data[i].role[o].key)
            }
            response.data.data[i].roles_name = roles
          } else {
            const roles = []
            roles.push(response.data.data[i].role[0].key)
            response.data.data[i].roles_name = roles
          }
        }
        // 对数据进行分页
        const { newListData, data } = tableDataProcess(response.data.data, this.pageConfig.pagesSize)
        this.pageConfig.total = data.length
        this.listData = newListData
        this.interimListData = data
      })
      setTimeout(() => {
        this.loading = false
      }, 500)
      this.add_data.major_list = newData
    },
    // 显示修改弹窗
    showUpData(data) {
      // 对象深拷贝
      this.editData = JSON.parse(JSON.stringify(data))
      this.editViews = true
    },
    // 表多选时
    selectChange(v) {
      this.deleteArr = v
    },
    // 修改数据
    upData(data) {
      const role = []
      for (const key in data.roles_name) {
        role.push({ key: data.roles_name[key] })
      }
      if (data.status) {
        data.status = 1
      } else {
        data.status = 0
      }
      const nweData = {
        key: data.key,
        username: data.username,
        password: data.password,
        role: role,
        status: data.status
      }
      updateAdminsApi(nweData).then((response) => {
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
        this.editViews = false
        this.getListData()
      })
    },
    // 添加数据
    addData(data) {
      const role = []
      for (const key in data.roles) {
        role.push({ key: data.roles[key] })
      }
      if (data.status) {
        data.status = 1
      } else {
        data.status = 0
      }
      addAdminApi({
        status: data.status,
        username: data.username,
        password: data.password,
        role: role
      }).then(response => {
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
        this.addViews = false
        this.add_data = {}
        this.getListData()
      })
    },
    // 添加&修改弹窗数据清空
    addRe() {
      this.add_data = {}
      Object.keys(this.editData).forEach(item => {
        if (item === 'key') {
          return
        }
        if (item === 'roles_name') {
          this.editData[item] = []
          return
        }
        this.editData[item] = null
      })
    },
    setPage(v) {
      this.pageConfig.Page = v
    },
    // 搜索
    search(value) {
      this.listData = value.data
      this.pageConfig.total = value.total
    }
  }
}
</script>

<style scoped>
</style>
